<template>
  <div class="Details">
    <div class="footer" v-if="current!=='map'">
      <p class="p">江西素柏木业有限公司</p>
      <div class="address">
        <span>
          <h6>江西省</h6>
          <p>所在省份</p>
        </span>
        <span>
          <h6>抚州市</h6>
          <p>所在城市</p>
        </span>
        <span>
          <h6>高新区</h6>
          <p>所在区/县</p>
        </span>
        <span>
          <h6>否</h6>
          <p>是否在农村</p>
        </span>
        <span>
          <h6>1600百万</h6>
          <p>注册资本</p>
        </span>
        <span>
          <h6>2010-09-09</h6>
          <p>成立日期</p>
        </span>
        <span>
          <h6>1,345人</h6>
          <p>员工人数</p>
        </span>
        <span>
          <h6>江西省抚州市高新区南山街道南山大道56号</h6>
          <p>企业地址</p>
        </span>
        <span>
          <h6>278573622@qq.com</h6>
          <p>邮箱</p>
        </span>
      </div>
      <div class="button">
        <a-button type="primary">拨打电话</a-button>
        <a-button type="primary" class="spacing">导航</a-button>
        <a-button type="primary">编辑资料</a-button>
      </div>
      <!-- 曲线图数据 -->
      <div class="curve">
        <div class="left online">线上尽调</div>
        <div class="right">
          <span @click="gomap()">编辑围栏</span>
        </div>
      </div>
      <div class="Passenger">
        <p>客流指数(7天)</p>
        <v-chart class="my-chart" :options="option" />
      </div>
			<!-- banner 轮播图 -->
			<div class="banner">
				<p class="p">员工画像</p>
				<a-carousel autoplay>
				<!--<a-carousel>-->
					<div>
						<v-chart class="my-chart" :options="pieobj" />
					</div>
					<div>
						<v-chart class="my-chart" :options="pieobj" />
					</div>
					<div>
						<v-chart class="my-chart" :options="pieobj" />
					</div>
				</a-carousel>
			</div>
      <!-- 经营信息 -->
      <div class="management">
        <p class="p">经营信息</p>
        <div class="index">
          <!-- 商业 -->
          <div class="business">
            <p>商业配置指数</p>
            <div class="icon">
              <a-rate :default-value="3.5" allow-half disabled />
            </div>
          </div>
          <!-- 交通 -->
          <div class="traffic">
            <p>交通便利指数</p>
            <div class="icon">
              <a-rate :default-value="5" allow-half disabled />
            </div>
          </div>
          <!-- 行业 -->
          <div class="industry">
            <p>行业竞争指数</p>
            <div class="icon">
              <a-rate :default-value="5" allow-half disabled />
            </div>
          </div>
        </div>
      </div>
      <!-- 跟进记录 -->
      <div class="record">
        <!-- 表头 -->
        <div class="head">
          <div class="left online">跟进进度</div>
          <div class="right">
            <span>+添加跟进记录</span>
          </div>
        </div>
        <!-- 时间进度 -->
        <ul class="time">
					<li class="left" v-for="n in 5 " :key="n">
						<div class="floatLeft">
							<p>08:32</p>
							<p>09-23</p>
						</div>
						<div class="floatLeft">
							<p>手头正忙,稍后联系</p>
							<p>电话跟进</p>
							<p>下次跟进时间 05-12 15:00</p>
						</div>
					</li>
        </ul>
      </div>
    </div>
    <NavigationMap :current.sync="current" v-if="current==='map'" />
  </div>
</template>

<script>
	import ECharts from 'vue-echarts'
	import 'echarts/lib/chart/bar'
	import 'echarts/lib/chart/line'
	import 'echarts/lib/chart/pie'
	import 'echarts/lib/component/tooltip'
	import 'echarts/lib/component/legend'
	import 'echarts/lib/component/title'

	export default {
		components: {
			'v-chart': ECharts,
			NavigationMap: () => import('./NavigationMap')
		},
		data () {
			return {
				current: '1',
				option: {
					xAxis: {
						type: 'category',
						data: ['8-20', '8-21', '8-22', '8-23', '8-24', '8-25', '8-26']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [2000, 932, 901, 934, 1290, 1330, 1320],
						type: 'line'
					}],
					grid: {
						x: 80,
						y: 30,
						backgroundColor: 'rgba(0,0,0,0)',
						borderWidth: 1,
						borderColor: '#ccc'
					}
				},
				pieobj: {
					title: {},
					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b} : {c} ({d}%)'
					},
					legend: {
						top: '20%',
						orient: 'vertical',
						left: 'left',
						data: ['19-24岁', '25-34岁', '35-44岁', '45-54岁', '55岁以上']
					},
					series: [
						{
							name: '访问来源',
							type: 'pie',
							radius: '55%',
							center: ['50%', '60%'],
							data: [
								{ value: 335, name: '19-24岁' },
								{ value: 310, name: '25-34岁' },
								{ value: 234, name: '35-44岁' },
								{ value: 135, name: '45-54岁' },
								{ value: 1548, name: '55岁以上' }
							],
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}
					]
				}
			}
		},
		methods: {
			callback (key) {
				window.console.log('key', key)
			},
			// 点击导航栏获取key值
			handleClick (e) {
				// console.log('click ', e)
				this.current = e.key
			},
			// 点击导航跳转地图
			gomap () {
				this.current = 'map'
			}
		}
	}
</script>

<style scoped lang="less">
	.Details {
		height: 100%;
		overflow: auto;
		.footer {
			padding: 60px 20px 30px 20px;
			background-color: @whiteBg;
			text-align: center;
			.p {
				font-size: @font30;
				text-align: center;
				color: @black;
				font-weight: bold;
			}
			.address {
				display: flex;
				text-align: left;
				justify-content: space-around;
				span {
					text-align: center;
					font-size: @font22;
					h6 {
						color: @black;
						font-size: @font22;
					}
					p {
						color: @greyq;
						font-size: @font22;
					}
				}
			}
			.button {
				.spacing {
					margin: 20px 60px;
				}
			}
			.curve {
				padding: 0 20px;
				overflow: hidden;
				.left {
					float: left;
					font-size: @font30;
					font-weight: bold;
					color: @black;
					padding-left: 20px;
					position: relative;
				}
				.online:before {
					content: '';
					position: absolute;
					left: 0;
					top: 0;
					width: 5px;
					height: 100%;
					background: @primary-color;
				}
				.right {
					float: right;
					span {
						font-size: @font24;
						font-weight: bold;
						color: @blueColor;
					}
				}
			}
			.Passenger {
				p {
					text-align: left;
					margin-left: 30px;
					margin-top: 30px;
					font-size: @font26;
					color: @black;
					font-weight: bold;
				}
				.my-chart {
					width: 100%;
					height: 500px;
				}
			}
			.banner {
				p {
					text-align: left;
					margin-left: 30px;
					margin-top: 30px;
					font-size: @font26;
					color: @black;
					font-weight: bold;
				}
				/deep/ .ant-carousel .slick-dots li button {
					background: @primary-color;
				}
				.my-chart {
					height: 500px;
					width: 100%;
				}
			}
			.management {
				padding: 0px 20px;
				margin-top: 30px;
				.p {
					text-align: left;
					font-size: @font26;
					color: @black;
					font-weight: bold;
				}
				.index {
					display: flex;
					justify-content: space-between;
					font-size: @font22;
				}
			}
			.record {
				.head {
					margin-top: 60px;
					margin-bottom: 30px;
					overflow: hidden;
					padding: 0 20px;
					.left {
						float: left;
						font-size: @font30;
						font-weight: bold;
						color: @black;
						padding-left: 20px;
						position: relative;
					}
					.online:before {
						content: '';
						position: absolute;
						left: 0;
						top: 0;
						width: 5px;
						height: 100%;
						background: @primary-color;
					}
					.right {
						float: right;
						span {
							font-size: @font24;
							font-weight: bold;
							color: @blueColor;
						}
					}
				}
				ul.time {
					text-align: left;
					width: 100%;
					overflow: hidden;
					padding: 0 20px;
					li {
						float: left;
						width: 33.33%;
						margin-bottom: 20px;
						position: relative;
						div:first-child {
							margin-right: 20px;
							transform: translate(0, 26%);
						}
						div p:first-child {
							font-weight: bold;
						}
					}
					li:not(:nth-child(3n)):after {
						content: '';
						position: absolute;
						top: 26%;
						right: 40px;
						width: 1px;
						height: 30%;
						background: @greyc;
					}
				}
			}
		}
	}
	/deep/.ant-input {
		//写在全局处
		height: 10px;
	}
</style>
